<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
    <link rel="stylesheet" href="/static/css/styles.css">
</head>
<body>
    <nav class="navbar" style="background: rgba(0,0,0,0.2); padding: 1rem; display: flex; justify-content: space-between; align-items: center;">
        <div class="nav-brand" style="font-size: 1.5rem; font-weight: bold;">
            <a href="/" style="color: white; text-decoration: none;">☁️ 云聊天</a>
        </div>
        <div class="nav-links" style="display: flex; gap: 2rem;">
            <a href="/accounts/login/" style="color: white; text-decoration: none; position: relative;">
                登录
                <span style="position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: white; transition: width 0.3s;"></span>
            </a>
            <a href="/accounts/register/" style="color: white; text-decoration: none; position: relative;">
                注册
                <span style="position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: white; transition: width 0.3s;"></span>
            </a>
            <a href="/accounts/profile/" style="color: white; text-decoration: none; position: relative;">
                个人中心
                <span style="position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: white; transition: width 0.3s;"></span>
            </a>
        </div>
    </nav>
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</body>
</html>